<template>
  <div class="st" v-show="this.show">
    <div class="note">
      <p class="note-title">发票须知</p>
      <ul>
        <li>房费发票由美团开具，发票金额为扣减优惠后，您实际支付的房费金额，不包含抵用券、促销金额等；</li>
        <li>若您购买了取消险，取消险发票由保险公司开具；</li>
        <li>若选择增值税普通发票（纸质）、纸质增值税专用发票（纸质），您需要支付邮费，发票将在离店后3天内开具并邮寄，预计15天内送达；</li>
        <li>您可视公司财务报销要求，选择发票类型，若选择专用发票需要提供公司税号等信息；</li>
        <li>电子增值税普通发票是税务局认可的有效消费凭证，将在离店后3天内开具并自动发送至您填写的邮箱；</li>
      </ul>
      
    </div>
    <div class="close">
        <img  src="./../../assets/images/close.png" alt="close" @click="close">
      </div>
  </div>
</template>

<script>
export default {
    data () {
    return {
      show: false
    }
  },
  props: {
    value: {
      type: Boolean
    }
  },
  methods:{
    close(){
      this.show = false;
      this.$emit('on-display', false)
    }
  },
  watch: {
    show (val) {
      console.log(val)
      this.$emit('input', val)
      
    },
    value: {
      handler: function (val) {
        this.show = val
      },
      // immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.st{
  background: rgba(255,255,255,0.95);
  z-index: 10000;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #333333;
  .note{
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    .note-title{
      text-align: center;
      font-size: 17px;
      padding-bottom:25px; 
    }
    
    ul{
      width: 75%;
      margin: 0 auto;
    }
    li{
      list-style-type: disc;
      font-size: 14px;
      line-height: 18px;
      padding: 5px 0;
    }
  }
  .close{
      position: absolute;
      width: 100%;
      bottom: 40px;
      text-align: center;
    img{
      width: 38px;
      height: 38px;
    }
  }
}
</style>
